<!DOCTYPE html>
<html>
  <head>
    <title>customization</title>
    
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="customs/plugins/modcoder/jquery.modcoder.excolor.js"></script>
<script type="text/javascript" src="customs/customization.js"></script>

<link href="css/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css">
<link href="customs/customization.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://captchaimagesteravisiontech.appspot.com/js/jcap.js"></script>
<script type="text/javascript" src="http://captchaimagesteravisiontech.appspot.com/js/md5.js"></script>
<script type="text/javascript" src="validations.js"></script>

<style type="text/css">
#mw2cWrapper {overflow:hidden;}
#mw2cWrapper > div, div.field {margin: 10px 0;}
#mw2cTitleContainer {display:table;width:100%;}
#mw2cTitle {display:table-cell;vertical-align:middle;}
#mw2cMessages {border: 1px red solid;background-color: white;}
#mw2cMessages h3, #mw2cRequiredMessage {color: red;}
#mw2cMessages span, div.msg {color: red; font-weight: bold; background-color: #FFDFDF;}
div.invalid {background-color: #FFDFDF;}
</style>
<script type="text/javascript">mw2c$ = jQuery.noConflict();function onSubmit() {if(jcap("Captcha Error test 2")) {mw2c$("#mw2cMessages").hide();mw2c$("#uword").parent("div.field").removeClass("invalid");mw2c$("#uword").next("div.msg").hide();return true;}mw2c$("#mw2cMessages").show();return false;}</script>

  </head>
  <body>
    
<div class="customization-widget-menu">
        <div id="accordion">
        <h3><a href="#">Themes</a></h3>
        <div>
        <div style="cursor: pointer; cursor: hand; padding: 10px;"
          onclick="hasAppliedTheme();">l'Azulita</div>
        <div style="cursor: pointer; cursor: hand; padding: 10px;"
          onclick="hasAppliedTheme();">Theme 2:</div>
        <div style="cursor: pointer; cursor: hand; padding: 10px;"
          onclick="hasAppliedTheme();">Theme 3:</div>
        </div>
        <!--Themes-->
        <h3><a href="#">Form Properties</a></h3>
        <div>
        <h4 class="toggler">Header</h4>
        <div class="toggleable">
        <div class="field"><label
          for="frameheadercolor__c">Color:</label> <input type="text"
          name="frameheadercolor__c" id="frameheadercolor__c" class="hex"
          value="#FFFFFF" /></div>
        <div class="field"><label>Corner
        Roundness: <span id="frameheaderradius__c"></span></label>
        <div id="frameHeaderCornerRoundness" class="slider"></div>
        </div>
        </div>
        <h4 class="toggler">Title</h4>
        <div class="toggleable">
        <div class="field"><label
          for="frametitlealign__c">Align:</label> <select
          name="frametitlealign__c" id="frametitlealign__c">
          <option>Left</option>
          <option>Center</option>
          <option>Right</option>
        </select></div>
        </div>
        <h4 class="toggler">Border</h4>
        <div class="toggleable">
        <div class="field"><label
          for="frameborderstyle__c">Style:</label> <select
          name="frameborderstyle__c" id="frameborderstyle__c">
          <option>Dashed</option>
          <option>Dotted</option>
          <option>Double</option>
          <option>Groove</option>
          <option>Inset</option>
          <option selected="selected">None</option>
          <option>Outset</option>
          <option>Ridge</option>
          <option>Solid</option>
        </select></div>
        <div class="field"><label>Size: <span
          id="framebordersize__c"></span></label>
        <div id="frameBorderSize" class="slider"></div>
        </div>
        <div class="field"><label>Corner
        Roundness: <span id="frameborderradius__c"></span></label>
        <div id="frameCornerRoundness" class="slider"></div>
        </div>
        <div class="field sub-category"><label
          for="framebordercolor__c">Color:</label> <input type="text"
          name="framebordercolor__c" id="framebordercolor__c" class="hex"
          value="#000000" /></div>
        </div>
        <h4 class="toggler">Background</h4>
        <div class="toggleable">
        <div class="field"><label for="backgroundcolor__c">Color:</label>
        <input type="text" name="backgroundcolor__c" id="backgroundcolor__c"
          class="hex" value="#ffffff" /></div>
        <div class="field"><label>Gradient:</label> <select
          name="backgroundgradient__c" id="backgroundgradient__c"
          class="custom-dd">
          <option value="flat"
            data-image="url(http://jqueryui.com/themeroller/images/textures/01_flat.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/flat.gif')}">Flat</option>
          <option value="highlight_soft"
            data-image="url(http://jqueryui.com/themeroller/images/textures/03_highlight_soft.png) repeat-x"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/highlight_soft.gif')}">Highlight
          soft</option>
          <option value="highlight_hard"
            data-image="url(http://jqueryui.com/themeroller/images/textures/04_highlight_hard.png) repeat-x"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/highlight_hard.gif')}">Highlight
          hard</option>
          <option value="diagonals_medium"
            data-image="url(http://jqueryui.com/themeroller/images/textures/07_diagonals_medium.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/diagonals_medium.gif')}">Diagonals
          medium</option>
          <option value="diagonals_hard"
            data-image="url(http://jqueryui.com/themeroller/images/textures/08_diagonals_thick.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/diagonals_thick.gif')}">Diagonals
          thick</option>
          <option value="gloss_wave"
            data-image="url(http://jqueryui.com/themeroller/images/textures/12_gloss_wave.png) repeat-x"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/gloss_wave.gif')}">Gloss
          wave</option>
          <option value="diamond"
            data-image="url(http://jqueryui.com/themeroller/images/textures/13_diamond.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/diamond.gif')}">Diamond</option>
          <option value="loop"
            data-image="url(http://jqueryui.com/themeroller/images/textures/14_loop.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/loop.gif')}">Loop</option>
          <option value="carbon_fiber"
            data-image="url(http://jqueryui.com/themeroller/images/textures/15_carbon_fiber.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/carbon_fiber.gif')}">Carbon
          fiber</option>
          <option value="hexagon"
            data-image="url(http://jqueryui.com/themeroller/images/textures/18_hexagon.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/hexagon.gif')}">Hexagon</option>
          <option value="layered_circles"
            data-image="url(http://jqueryui.com/themeroller/images/textures/19_layered_circles.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/layered_circles.gif')}">Layered
          circles</option>
          <option value="3d_boxes"
            data-image="url(http://jqueryui.com/themeroller/images/textures/20_3D_boxes.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/3D_boxes.gif')}">3D
          boxes</option>
          <option value="spotlight"
            data-image="url(http://jqueryui.com/themeroller/images/textures/22_spotlight.png) repeat-x"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/spotlight.gif')}">Spotlight</option>
          <option value="fine_grain"
            data-image="url(http://jqueryui.com/themeroller/images/textures/23_fine_grain.png) repeat"
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/gradients/fine_grain.gif')}">Fine
          grain</option>
        </select></div>
        </div>
        <h4 class="toggler">Buttons</h4>
        <div class="toggleable">
        <div class="field"><label>Style:</label> <select
          name="formbuttonsstyle__c" id="formbuttonsstyle__c"
          class="custom-dd">
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/standard.png')}">Standard</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/plain.png')}">Plain</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/crazy_blue.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_glass_45_0078ae_1x400.png')}"
            data-border-color="77D5F7" data-font-color="FFFFFF"
            data-background-color="0078AE">Crazy blue</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/crazy_blue_solid.png')}"
            data-image="" data-border-color="77D5F7" data-font-color="FFFFFF"
            data-background-color="0078AE">Crazy blue solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/aggressive_green.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_highlight-soft_60_4ca20b_1x100.png')}"
            data-border-color="45930B" data-font-color="FFFFFF"
            data-background-color="45930B">Aggressive green</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/aggressive_green_solid.png')}"
            data-image="" data-border-color="45930B" data-font-color="FFFFFF"
            data-background-color="45930B">Aggressive green solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/amarillo_pipa.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_gloss-wave_60_fece2f_500x100.png')}"
            data-border-color="D19405" data-font-color="4C3000"
            data-background-color="FECE2F">Amarillo pipa</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/amarillo_pipa_solid.png')}"
            data-image="" data-border-color="D19405" data-font-color="4C3000"
            data-background-color="FECE2F">Amarillo pipa solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/red_passion.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_50_d0062f_1x100.png')}"
            data-border-color="C5DBEC" data-font-color="F5F4F5"
            data-background-color="821C26">Red passion</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/red_passion_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="F2F2F2"
            data-background-color="BF2222">Red passion solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/pandora.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_75_efebce_1x100.png')}"
            data-border-color="D3D3D3" data-font-color="555555"
            data-background-color="EFEBCE">Pandora</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/pandora_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="555555"
            data-background-color="EFEBCE">Pandora solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/tomate.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_50_ff6666_1x100.png')}"
            data-border-color="D3D3D3" data-font-color="423E3E"
            data-background-color="FF6666">Tomate</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/tomate_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="423E3E"
            data-background-color="FF6666">Tomate solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/beach.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_30_1b5891_1x100.png')}"
            data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="1B5891">Beach</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/beach_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="1B5891">Beach solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/laguna_seca.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_30_005422_1x100.png')}"
            data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="005422">Laguna seca</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/laguna_seca_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="005422">Laguna seca solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/tintorero.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_30_630000_1x100.png')}"
            data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="630000">Tintorero</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/tintorero_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="630000">Tintorero solid</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/naranja.png')}"
            data-image="{!URLFOR($Resource.jqueryCustomization, 'img/buttons/ui-bg_inset-soft_75_ff7400_1x100.png')}"
            data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="FF7400">Naranja</option>
          <option
            data-preview="{!URLFOR($Resource.jqueryCustomization, 'img/previews/buttons/naranja_solid.png')}"
            data-image="" data-border-color="D3D3D3" data-font-color="F5F4F4"
            data-background-color="FF7400">Naranja solid</option>
        </select></div>
        <div class="field"><label for="formbuttonsalign__c">Align:</label>
        <select name="formbuttonsalign__c" id="formbuttonsalign__c">
          <option>Left</option>
          <option>Center</option>
          <option>Right</option>
        </select></div>
        <div class="field"><label for="formbuttonssubmittext__c">Submit
        Text:</label> <input type="text" name="formbuttonssubmittext__c"
          id="formbuttonssubmittext__c" value="Submit" maxlength="50" /></div>
        <div class="field"><label for="formbuttonsresettext__c">Reset
        Button:</label> <input type="checkbox" name="formbuttonsresetchecked__c"
          id="formbuttonsresetchecked__c" /> <input type="text"
          name="formbuttonsresettext__c" id="formbuttonsresettext__c"
          disabled="disabled" value="Reset" maxlength="50" /></div>
        </div>
        <h4 class="toggler">Required Fields Legend</h4>
        <div class="toggleable">
        <div class="field"><label for="requiredfieldslegendtext__c">Text:</label>
        <input type="text" name="requiredfieldslegendtext__c"
          id="requiredfieldslegendtext__c" maxlength="50" /></div>
        <div class="field"><label
          for="requiredfieldslegendposition__c">Position:</label> <select
          name="requiredfieldslegendposition__c"
          id="requiredfieldslegendposition__c">
          <option>Top</option>
          <option>Bottom</option>
        </select></div>
        <div class="field"><label for="requiredfieldslegendalign__c">Align:</label>
        <select name="requiredfieldslegendalign__c"
          id="requiredfieldslegendalign__c">
          <option>Left</option>
          <option>Center</option>
          <option>Right</option>
        </select></div>
        </div>
        <h4 class="toggler">Catpcha Legend</h4>
        <div class="toggleable">
        	<div class="field"><label for="captchalegendtext__c">Text:</label>
        		<input type="text" name="captchalegendtext__c" id="captchalegendtext__c" maxlength="100" />
        	</div>
        </div>
        </div>
        <!--Form Properties-->
        <h3><a href="#">Form Fonts</a></h3>
        <div>
        <h4 class="toggler">Family</h4>
        <div class="toggleable">
        <h5 class="toggler">Title</h5>
        <div class="toggleable">
        <div class="field sub-category"><label
          for="fontsfamilytitle__c">Family:</label> <select
          name="fontsfamilytitle__c" id="fontsfamilytitle__c"
          style="width: 200px">
          <option>Calibri, Arial, sans-serif</option>
          <option>Verdana, Arial, sans-serif</option>
          <option>Helvetica, Arial, sans-serif</option>
          <option>Tahoma, Geneva, sans-serif</option>
          <option>'Trebuchet MS', Helvetica, sans-serif</option>
          <option>Georgia, Times, serif</option>
          <option>'Lucida Console', Monaco, monospace</option>
          <option>'Courier New', Courier, monospace</option>
        </select></div>
        </div>
        <h5 class="toggler">Required Fields Legend</h5>
        <div class="toggleable">
        <div class="field sub-category"><label
          for="fontsfamilyrequiredfieldslegend__c">Family:</label> <select
          name="fontsfamilyrequiredfieldslegend__c"
          id="fontsfamilyrequiredfieldslegend__c" style="width: 200px">
          <option>Calibri, Arial, sans-serif</option>
          <option>Verdana, Arial, sans-serif</option>
          <option>Helvetica, Arial, sans-serif</option>
          <option>Tahoma, Geneva, sans-serif</option>
          <option>'Trebuchet MS', Helvetica, sans-serif</option>
          <option>Georgia, Times, serif</option>
          <option>'Lucida Console', Monaco, monospace</option>
          <option>'Courier New', Courier, monospace</option>
        </select></div>
        </div>
        <h5 class="toggler">Input Labels</h5>
        <div class="toggleable">
        <div class="field"><label for="fontsfamilyinputlabels__c">Family:</label>
        <select name="fontsfamilyinputlabels__c"
          id="fontsfamilyinputlabels__c" style="width: 90%">
          <option>Calibri, Arial, sans-serif</option>
          <option>Verdana, Arial, sans-serif</option>
          <option>Helvetica, Arial, sans-serif</option>
          <option>Tahoma, Geneva, sans-serif</option>
          <option>'Trebuchet MS', Helvetica, sans-serif</option>
          <option>Georgia, Times, serif</option>
          <option>'Lucida Console', Monaco, monospace</option>
          <option>'Courier New', Courier, monospace</option>
        </select></div>
        </div>
        <h5 class="toggler">Input Text</h5>
        <div class="toggleable">
        <div class="field"><label for="fontsfamilyinputtext__c">Family:</label>
        <select name="fontsfamilyinputtext__c" id="fontsfamilyinputtext__c"
          style="width: 90%">
          <option>Calibri, Arial, sans-serif</option>
          <option>Verdana, Arial, sans-serif</option>
          <option>Helvetica, Arial, sans-serif</option>
          <option>Tahoma, Geneva, sans-serif</option>
          <option>'Trebuchet MS', Helvetica, sans-serif</option>
          <option>Georgia, Times, serif</option>
          <option>'Lucida Console', Monaco, monospace</option>
          <option>'Courier New', Courier, monospace</option>
        </select></div>
        </div>
        <h5 class="toggler">Button Text</h5>
        <div class="toggleable">
        <div class="field"><label for="fontsfamilybuttontext__c">Family:</label>
        <select name="fontsfamilybuttontext__c"
          id="fontsfamilybuttontext__c" style="width: 90%">
          <option>Calibri, Arial, sans-serif</option>
          <option>Verdana, Arial, sans-serif</option>
          <option>Helvetica, Arial, sans-serif</option>
          <option>Tahoma, Geneva, sans-serif</option>
          <option>'Trebuchet MS', Helvetica, sans-serif</option>
          <option>Georgia, Times, serif</option>
          <option>'Lucida Console', Monaco, monospace</option>
          <option>'Courier New', Courier, monospace</option>
        </select></div>
        </div>
        </div>
        <h4 class="toggler">Size</h4>
        <div class="toggleable">
        <h5 class="toggler">Title</h5>
        <div class="toggleable">
        <div class="field sub-category"><label>Size: <span
          id="fontssizetitle__c"></span></label>
        <div id="frameTitleSize" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">Required Fields Legend</h5>
        <div class="toggleable">
        <div class="field"><label>Size: <span
          id="fontssizerequiredfieldslegend__c"></span></label>
        <div id="frameReqFldsLegSize" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">Input Labels</h5>
        <div class="toggleable">
        <div class="field"><label>Size: <span
          id="fontssizeinputlabels__c"></span></label>
        <div id="frameFontSize" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">Input Text</h5>
        <div class="toggleable">
        <div class="field"><label>Size: <span
          id="fontssizeinputtext__c"></span></label>
        <div id="frameInpTextFontSize" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">Button Text</h5>
        <div class="toggleable">
        <div class="field"><label>Size: <span
          id="fontssizebuttontext__c"></span></label>
        <div id="buttonTextFontSize" class="slider"></div>
        </div>
        </div>
        </div>
        <h4 class="toggler">Color</h4>
        <div class="toggleable">
        <h5 class="toggler">Title</h5>
        <div class="toggleable">
        <div class="field"><label for="fontscolortitle__c">Color:</label>
        <input type="text" name="fontscolortitle__c" id="fontscolortitle__c"
          class="hex" value="#000000" /></div>
        </div>
        <h5 class="toggler">Required Fields Legend</h5>
        <div class="toggleable">
        <div class="field"><label
          for="fontscolorrequiredfieldslegend__c">Color:</label> <input
          type="text" name="fontscolorrequiredfieldslegend__c"
          id="fontscolorrequiredfieldslegend__c" class="hex" value="#ff0000" />
        </div>
        </div>
        <h5 class="toggler">Input Labels</h5>
        <div class="toggleable">
        <div class="field"><label for="fontscolorinputlabels__c">Color:</label>
        <input type="text" name="fontscolorinputlabels__c"
          id="fontscolorinputlabels__c" class="hex" value="#000000" /></div>
        </div>
        <h5 class="toggler">Input Text</h5>
        <div class="toggleable">
        <div class="field"><label for="fontscolorinputtext__c">Color:</label>
        <input type="text" name="fontscolorinputtext__c"
          id="fontscolorinputtext__c" class="hex" value="#000000" /></div>
        </div>
        <h5 class="toggler">Button Text</h5>
        <div class="toggleable">
        <div class="field"><label for="fontscolorbuttontext__c">Color:</label>
        <input type="text" name="fontscolorbuttontext__c"
          id="fontscolorbuttontext__c" class="hex" value="#000000" /></div>
        </div>
        </div>
        <h4 class="toggler">Style</h4>
        <div class="toggleable">
        <h5 class="toggler">Title</h5>
        <div class="toggleable">
        <div class="field inline"><input type="checkbox"
          name="fontsstyletitlebold__c" id="fontsstyletitlebold__c" /> <label
          for="fontsstyletitlebold__c"> Bold </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstyletitlesmallcaps__c" id="fontsstyletitlesmallcaps__c" />
        <label for="fontsstyletitlesmallcaps__c"> Small Caps </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstyletitleitalic__c" id="fontsstyletitleitalic__c" /> <label
          for="fontsstyletitleitalic__c"> Italic </label></div>
        </div>
        <h5 class="toggler">Required Fields Legend</h5>
        <div class="toggleable">
        <div class="field inline"><input type="checkbox"
          name="fontsstylerequiredfieldslegendbold__c"
          id="fontsstylerequiredfieldslegendbold__c" /> <label
          for="fontsstylerequiredfieldslegendbold__c"> Bold </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstylerequiredfieldslegendsmallcaps__c"
          id="fontsstylerequiredfieldslegendsmallcaps__c" /> <label
          for="fontsstylerequiredfieldslegendsmallcaps__c"> Small
        Caps </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstylerequiredfieldslegenditalic__c"
          id="fontsstylerequiredfieldslegenditalic__c" /> <label
          for="fontsstylerequiredfieldslegenditalic__c"> Italic </label></div>
        </div>
        <h5 class="toggler">Labels</h5>
        <div class="toggleable">
        <div class="field inline"><input type="checkbox"
          name="fontsstylelabelsbold__c" id="fontsstylelabelsbold__c" /> <label
          for="fontsstylelabelsbold__c"> Bold </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstylelabelssmallcaps__c"
          id="fontsstylelabelssmallcaps__c" /> <label
          for="fontsstylelabelssmallcaps__c"> Small Caps </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstylelabelsitalic__c" id="fontsstylelabelsitalic__c" />
        <label for="fontsstylelabelsitalic__c"> Italic </label></div>
        </div>
        <h5 class="toggler">Input Text</h5>
        <div class="toggleable">
        <div class="field inline"><input type="checkbox"
          name="fontsstyleinputtextbold__c" id="fontsstyleinputtextbold__c" />
        <label for="fontsstyleinputtextbold__c"> Bold </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstyleinputtextsmallcaps__c"
          id="fontsstyleinputtextsmallcaps__c" /> <label
          for="fontsstyleinputtextsmallcaps__c"> Small Caps </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstyleinputtextitalic__c"
          id="fontsstyleinputtextitalic__c" /> <label
          for="fontsstyleinputtextitalic__c"> Italic </label></div>
        </div>
        <h5 class="toggler">Button Text</h5>
        <div class="toggleable">
        <div class="field inline"><input type="checkbox"
          name="fontsstylebuttontextbold__c" id="fontsstylebuttontextbold__c" />
        <label for="fontsstylebuttontextbold__c"> Bold </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstylebuttontextsmallcaps__c"
          id="fontsstylebuttontextsmallcaps__c" /> <label
          for="fontsstylebuttontextsmallcaps__c"> Small Caps </label></div>
        <div class="field inline"><input type="checkbox"
          name="fontsstylebuttontextitalic__c"
          id="fontsstylebuttontextitalic__c" /> <label
          for="fontsstylebuttontextitalic__c"> Italic </label></div>
        </div>
        </div>
        </div>
        <h3><a href="#">Form layout</a></h3>
        <div>
        <div class="layout-props">
        <h4>Input Display</h4>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/block.gif')}"
          alt="block" /></div>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/inline.gif')}"
          alt="inline" /></div>
        <div class="optionEntry"><input type="radio"
          name="layoutdisplay__c" id="block" value="b" checked="checked" />
        <label for="block">Block</label></div>
        <div class="optionEntry"><input type="radio"
          name="layoutdisplay__c" id="inline" value="i" /> <label
          for="inline">Inline</label></div>
        </div>
        <div class="layout-props">
        <h4>Label Align</h4>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/left.gif')}"
          alt="left" /></div>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/right.gif')}"
          alt="right" /></div>
        <div class="optionEntry"><input type="radio"
          name="layoutalign__c" id="left" value="l" checked="checked" /> <label
          for="left">Left</label></div>
        <div class="optionEntry"><input type="radio"
          name="layoutalign__c" id="right" value="r" /> <label for="right">Right</label>
        </div>
        </div>
        <div class="layout-props">
        <h4>Columns</h4>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/1col.gif')}"
          alt="1col" /></div>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/2col.gif')}"
          alt="2col" /></div>
        <div class="optionEntry"><input type="radio"
          name="layoutcolumn__c" id="column_1" value="1" checked="checked" />
        <label for="column_1">1-Column</label></div>
        <div class="optionEntry"><input type="radio"
          name="layoutcolumn__c" id="column_2" value="2" /> <label
          for="column_2">2-Column</label></div>
        </div>
        <div class="layout-props">
        <h4>Tab-key order</h4>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/left_to_right.gif')}"
          alt="left_to_right" /></div>
        <div class="optionEntryImage"><img
          src="{!URLFOR($Resource.jqueryCustomization, 'img/top_to_bottom.gif')}"
          alt="top_to_bottom" /></div>
        <div class="optionEntry"><input type="radio"
          name="layoutsortorder__c" id="sortOrder_h" value="h"
          checked="checked" /> <label for="sortOrder_h">Left-Right</label></div>
        <div class="optionEntry"><input type="radio"
          name="layoutsortorder__c" id="sortOrder_v" value="v" /> <label
          for="sortOrder_v">Top-Down</label></div>
        </div>
        </div>
        <!--Form layout-->
        <h3><a href="#">Inputs Properties</a></h3>
        <div>
        <h4 class="toggler">Border</h4>
        <div class="toggleable">
        <div class="field"><label for="inputsborderstyle__c">Style:</label>
        <select name="inputsborderstyle__c" id="inputsborderstyle__c">
          <option>Dashed</option>
          <option>Dotted</option>
          <option>Double</option>
          <option>Groove</option>
          <option>Double</option>
          <option>None</option>
          <option selected="selected">Inset</option>
          <option>Outset</option>
          <option>Ridge</option>
          <option>Solid</option>
        </select></div>
        <div class="field"><label>Size: <span
          id="inputsbordersize__c"></span></label>
        <div id="inputsBorderSize" class="slider"></div>
        </div>
        <div class="field"><label>Corner Roundness: <span
          id="inputsborderradius__c"></span></label>
        <div id="inputsCornerRoundness" class="slider"></div>
        </div>
        <div class="field"><label for="inputsbordercolor__c">Color:</label>
        <input type="text" name="inputsbordercolor__c"
          id="inputsbordercolor__c" class="hex" value="#ffffff" /></div>
        </div>
        <h4 class="toggler">Background</h4>
        <div class="toggleable">
        <div class="field"><label for="inputsbackgroundcolor__c">Color:</label>
        <input type="text" name="inputsbackgroundcolor__c"
          id="inputsbackgroundcolor__c" class="hex" value="#ffffff" /></div>
        </div>
        <h4 class="toggler">Size</h4>
        <div class="toggleable">
        <h5 class="toggler">Text</h5>
        <div class="toggleable">
        <div class="field"><label for="inputTextSizeWidth">Width:
        <span id="inputssizetextwidth__c"></span></label>
        <div id="inputTextSizeWidth" class="slider"></div>
        </div>
        <div class="field"><label for="inputTextSizeHeight">Height:
        <span id="inputssizetextheight__c"></span></label>
        <div id="inputTextSizeHeight" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">TextArea</h5>
        <div class="toggleable">
        <div class="field"><label for="inputTextAreaSizeWidth">Width:
        <span id="inputssizetextareawidth__c"></span></label>
        <div id="inputTextAreaSizeWidth" class="slider"></div>
        </div>
        <div class="field"><label for="inputTextAreaSizeHeight">Height:
        <span id="inputssizetextareaheight__c"></span></label>
        <div id="inputTextAreaSizeHeight" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">Select</h5>
        <div class="toggleable">
        <div class="field"><label for="inputSelectSizeWidth">Width:
        <span id="inputssizeselectwidth__c"></span></label>
        <div id="inputSelectSizeWidth" class="slider"></div>
        </div>
        <div class="field"><label for="inputSelectSizeHeight">Height:
        <span id="inputssizeselectheight__c"></span></label>
        <div id="inputSelectSizeHeight" class="slider"></div>
        </div>
        </div>
        <h5 class="toggler">MultiSelect</h5>
        <div class="toggleable">
        <div class="field"><label for="inputMultiSelectSizeWidth">Width:
        <span id="inputssizemultiselectwidth__c"></span></label>
        <div id="inputMultiSelectSizeWidth" class="slider"></div>
        </div>
        <div class="field"><label for="inputMultiSelectSizeHeight">Height:
        <span id="inputssizemultiselectheight__c"></span></label>
        <div id="inputMultiSelectSizeHeight" class="slider"></div>
        </div>
        </div>
        </div>
        </div>
        <!--Inputs Properties--></div>
        <!-- end accordion -->
        </div>
        <!-- end customization-widget-men -->

<form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" id="mw2c" method="post" onsubmit="return onSubmit();">
  <div id="mw2cWrapper">
    <div id="mw2cTitleContainer">
      <div id="mw2cTitle">Contact Us</div>
    </div>
    <div id="mw2cMessages"><h3>There was a problem with the submission</h3><p>Errors has been <span>highlighted</span> below</p></div>
    <div id="mw2cRequiredMessage">* Required Fields</div>
    <input type="hidden" name="orgid" value="00DA0000000CZ3TMAW" />
    <input type="hidden" name="mw2c__Multiple_Web2Case__c" value="a00A0000008ezGeIAI" />
    
    <input type="hidden" name="retURL" value="http://www.teravisiontech.com" />

    <div id="mw2cFields">

    <div class="field"><div class="label"><label id="company" title="Company" for="company">Company</label></div>
    <input tabindex="1" type="text" name="company" id="company" value="" maxlength="80" size="30" onblur=""/></div>

    <div class="field"><div class="label"><label id="email" title="Email" for="email">Email</label><span style="color:red">*</span></div>
    <input tabindex="2" type="text" name="email" id="email" value="" maxlength="80" size="30" onblur="validateRequired(this,'The field Email is required');validateEmail(this,'Please enter a valid email address.');"/></div>

    <div class="field"><div class="label"><label id="reason" title="Reason" for="reason">Reason</label><span style="color:red">*</span></div>
    <select tabindex="3" name="reason" id="reason" onblur="validateRequired(this,'The field Reason is required');">
      <option value="" selected="selected">--None--</option>
      <option value="Installation">Installation</option>
      <option value="Equipment Complexity">Equipment Complexity</option>
      <option value="Performance">Performance</option>
      <option value="Breakdown">Breakdown</option>
      <option value="Equipment Design">Equipment Design</option>
      <option value="Feedback">Feedback</option>
      <option value="Other">Other</option>
    </select></div>

    <div class="field"><div class="label"><label id="description" title="Description" for="description">Description</label><span style="color:red">*</span></div>
    <textarea tabindex="4" name="description" id="description" onblur="validateRequired(this,'The field Description is required');"cols="50" rows="5" maxlength="32000"></textarea></div>

    </div><div id="mw2cImages"></div><script type="text/javascript">sjcap();</script>

    <div id="mw2cButtons"><input type="submit" id="buttonSubmit" name="submit" value="Submit" /></div>
  </div>
</form>
            
    
  </body>
</html>